<script setup lang="ts">
import * as SearchApi from "@/api/search";
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
});

const emits = defineEmits(["update:modelValue", "suggestItem"]);
// (组件v-model绑定值)
const keyVal = useVModel(props, "modelValue", emits);

const visble = ref(false);
// 加载
const loading = ref(false);
// 搜素建议数组
const searchSuggestData = ref<any>([]);
const keyword = ref<string | number>("");

// 禁用页面滚动
watch(visble, (newVal) => {
  if (newVal) {
    document.body.addEventListener("click", close);
  } else {
    document.body.removeEventListener("click", () => {
      visble.value = false;
    });
  }
});

watch(keyword, (newVal) => {
  if (newVal) {
    getSearchSuggestByMobile();
  }
});

/**
 * 获取移动端搜索建议
 */
function getSearchSuggestByMobile() {
  SearchApi.searchSuggest({
    keywords: keyVal.value.toString(),
    type: "mobile",
  })
    .then((res) => {
      const { code, result } = res.data;
      if (code != 200) {
        return ElMessage.error("获取移动端搜索建议失败");
      }
      searchSuggestData.value = result.allMatch;
      console.log("获取移动端搜索建议成功==>", res.data);
    })
    .catch((err) => {
      ElMessage.error(err.message || "获取移动端搜索建议失败");
    });
}

// 点击猜你想搜的某一项
const handleSearchSuggest = (item: any) => {
  console.log("点击猜你想搜的某一项==>", item.keyword);
  keyVal.value = item.keyword;
  // 关闭搜索建议
  visble.value = false;
  emits('suggestItem');
};

function show(show: boolean, value?: string | number) {
  // if (!value) return;
  visble.value = show;
  keyword.value = value ?? "";
}

function close(e: MouseEvent) {
  if (!visble.value) return;
  const searchSuggestDom = document.querySelector(
    ".search-suggest"
  ) as HTMLElement;
  const searchMusicDom = document.querySelector(".search") as HTMLElement;

  const suggestRect = searchSuggestDom.getBoundingClientRect();
  const suggestx =
    e.clientX >= suggestRect.left && e.clientX <= suggestRect.right;
  const suggesty =
    e.clientY >= suggestRect.top && e.clientY <= suggestRect.bottom;

  const inputRect = searchMusicDom.getBoundingClientRect();
  const inputRectx =
    e.clientX >= inputRect.left && e.clientX <= inputRect.right;
  const inputRecty =
    e.clientY >= inputRect.top && e.clientY <= inputRect.bottom;

  // 在弹窗区域内
  if (suggestx && suggesty) {
    return;
  }

  // 在搜索框内
  if (inputRectx && inputRecty) {
    return;
  }
  visble.value = false;
}

defineExpose({
  show,
  close,
});

defineOptions({
  name: "HotSearch",
});
</script>

<template>
  <div class="search-dialog" v-show="visble">
    <!-- 搜索建议  -->
    <div v-loading="loading" class="search-suggest">
      <!-- 猜你想搜 -->
      <div class="guess-search mb-20px">
        <div class="title">
          <el-icon color="#636363"><Search /></el-icon>
          <span class="font-300 ml-5px">猜你想搜</span>
        </div>
        <ul class="content" v-if="searchSuggestData.length">
          <li
            v-for="(item, index) in searchSuggestData"
            :key="index"
            @click="handleSearchSuggest(item)"
          >
            <span>{{ item.keyword }}</span>
            <!-- 喜欢歌曲 -->
            <svg-icon
              v-if="item.alg.indexOf('Like') > -1"
              class="cursor-pointer"
              color="rgb(236,65,65)"
              size="20px"
              icon-class="unlike-music"
            />
            <!-- 听过的歌曲 -->
            <el-tag
              v-if="item.alg.indexOf('Heard') > -1"
              class="ml-2"
              type="info"
              size="small"
              >听过</el-tag
            >
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@mixin flex-center {
  display: flex;
  align-items: center;
}

@mixin scroll-bar($width: 10px) {
  /*定义滚动条外层轨道的样式*/
  &::-webkit-scrollbar-track {
    border-radius: 10px;
    // background-color: rgba(255,255,255,0);
  }
  /*定义滚动条整体的样式*/
  &::-webkit-scrollbar {
    width: $width;
    // height: 100px;
    background-color: rgba(255, 255, 255, 0);
  }
  /*滚动条里面可以拖动的那个*/
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.2);
  }
}

.title {
  margin-bottom: 15px;
  @include flex-center();
  & span:first-child {
    margin-right: 5px;
    font-size: 15px;
    color: #636363;
  }
}

.search-dialog {
  width: 100%;
  position: absolute;
  top: 45px;
  left: 0;
  z-index: 3000;
  @include flex-center;
  justify-content: center;
}

.search-suggest {
  width: 100%;
  height: auto;
  overflow-y: scroll;
  // 隐藏滚动条
  // &::-webkit-scrollbar {
  //   display: none;
  // }
  transition: all 0.3s linear;
  color: #5d5c5c;
  color: var(--el-text-color-primary);
  background-color: var(--el-color-white);
  box-shadow: var(--el-box-shadow-light);
  border-radius: 2px;
  border: 1px solid var(--el-card-border-color);
  @include scroll-bar;
  .guess-search {
    padding-top: 20px;
    .title {
      padding-left: 15px;
      font-size: 15px;
    }
  }

  .content li {
    font-weight: 300;
    color: #7d7d7d;
    font-size: 13px;
    @include flex-center;
    padding: 10px 10px 10px 36px;
    &:hover {
      cursor: pointer;
      background-color: #f2f2f2;
    }
  }
}
</style>
